<template>
  <el-card class="data-table" shadow="never">
    <el-table
      :data="data"
      :loading="loading"
      border
      stripe
      v-bind="$attrs"
    >
      <!-- 自动渲染列 -->
      <template v-for="column in columns" :key="column.prop">
        <el-table-column
          :prop="column.prop"
          :label="column.label"
          :width="column.width"
          :min-width="column.minWidth"
          :align="column.align || 'left'"
          :fixed="column.fixed"
        >
          <template #default="scope" v-if="column.slot">
            <slot :name="column.slot" :row="scope.row" :column="column" :index="scope.$index" />
          </template>
        </el-table-column>
      </template>
      
      <!-- 操作列 -->
      <el-table-column
        v-if="showActions"
        :label="actionsLabel"
        :width="actionsWidth"
        :fixed="actionsFixed"
        align="center"
      >
        <template #default="scope">
          <slot name="actions" :row="scope.row" :index="scope.$index" />
        </template>
      </el-table-column>
    </el-table>
    
    <!-- 分页 -->
    <div v-if="showPagination" class="pagination">
      <el-pagination
        v-model:current-page="pagination.page"
        v-model:page-size="pagination.pageSize"
        :total="pagination.total"
        :layout="paginationLayout"
        :page-sizes="pageSizes"
        @current-change="handlePageChange"
        @size-change="handleSizeChange"
      />
    </div>
  </el-card>
</template>

<script setup lang="ts">
import { ref, reactive } from 'vue'

// 列配置类型
interface ColumnConfig {
  prop: string
  label: string
  width?: string | number
  minWidth?: string | number
  align?: 'left' | 'center' | 'right'
  fixed?: boolean | 'left' | 'right'
  slot?: string
}

// 分页配置
interface PaginationConfig {
  page: number
  pageSize: number
  total: number
}

interface Props {
  data: any[]
  loading?: boolean
  columns: ColumnConfig[]
  pagination?: PaginationConfig
  showActions?: boolean
  actionsLabel?: string
  actionsWidth?: string | number
  actionsFixed?: boolean | 'left' | 'right'
  showPagination?: boolean
  paginationLayout?: string
  pageSizes?: number[]
}

const props = withDefaults(defineProps<Props>(), {
  loading: false,
  showActions: true,
  actionsLabel: '操作',
  actionsWidth: 150,
  actionsFixed: 'right',
  showPagination: true,
  paginationLayout: 'total, sizes, prev, pager, next, jumper',
  pageSizes: () => [10, 20, 50, 100],
  pagination: () => ({
    page: 1,
    pageSize: 10,
    total: 0
  })
})

interface Emits {
  (e: 'page-change', page: number): void
  (e: 'size-change', size: number): void
}

const emit = defineEmits<Emits>()

const pagination = reactive({
  page: props.pagination.page,
  pageSize: props.pagination.pageSize,
  total: props.pagination.total
})

const handlePageChange = (page: number) => {
  pagination.page = page
  emit('page-change', page)
}

const handleSizeChange = (size: number) => {
  pagination.pageSize = size
  emit('size-change', size)
}
</script>

<style scoped>
.data-table {
  margin-bottom: 20px;
}

.pagination {
  margin-top: 20px;
  display: flex;
  justify-content: flex-end;
}
</style>